
<template>
    <div class="person">
      <h2>name:{{person.name}}</h2>
      <button @click="changeName">edit name</button>
      <h2>age:{{person.age}}</h2>
      <button @click="changeAge">age+1</button>
      <h2>person:{{person.name+','+person.age}}</h2>
      <button @click="changePerson">换人</button>

    </div>
  </template>
  
  <script lang="ts" setup name="Watch">
    import {reactive,watch} from 'vue'
    
    let person =reactive({
      name:'zhang3',
      age:18
    })

    function changeName(){
        person.name += '~'
    }
    function changeAge(){
        person.age += 1
    }
    function changePerson(){
        // person = {name:'李四',age:20}
        Object.assign(person,{name:'李四',age:20})
    }

    //watch


  </script>